<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

<html><head><title>Extension - jQuery::dForm 0.1.3</title><link rel="stylesheet" type="text/css" href="../styles/main.css"><script language=JavaScript src="../javascript/main.js"></script><script language=JavaScript src="../javascript/searchdata.js"></script></head><body class="ContentPage" onLoad="NDOnLoad();"><script language=JavaScript><!--
if (browserType) {document.write("<div class=" + browserType + ">");if (browserVer) {document.write("<div class=" + browserVer + ">"); }}// --></script>

<!--  Generated by Natural Docs, version 1.5 -->
<!--  http://www.naturaldocs.org  -->

<!-- saved from url=(0026)http://www.naturaldocs.org -->




<div id=Content><div class="CFile"><div class=CTopic id=MainTopic><h1 class=CTitle><a name="Extension"></a>Extension</h1><div class=CBody><p>This page covers how to extend the dform plugin of your own types and subscribers as well as providing a documentation for form related jQuery plugins that are already supported out of the box.</p><h4 class=CHeading>Adding your own</h4><p>The main difference between types and element subscribers is, that element subscribers get the element passed which is already added into the DOM.&nbsp; So you will have to decide if you own subscriber will create a new element or extend an existing one.&nbsp; In the following hands on example we will create a custom hello world button and a subscriber that will alert some text when the element was clicked.</p><blockquote><pre>$.dform.addType(&quot;hellobutton&quot;, function(options) {
    // Return a new button element that has all options that
    // don't have a registered subscriber as attributes
    return $(&quot;&lt;button&gt;&quot;).dformAttr(options).html(&quot;Say hello&quot;);
 });

$.dform.subscribe(&quot;alert&quot;, function(options, type) {
    if(type == &quot;hellobutton&quot;)
    {
        this.click(function() {
            alert(options);
        });
    }
 });

// Use it like this
$(&quot;#mydiv&quot;).buildForm(
{
    &quot;type&quot; : &quot;hellobutton&quot;,
    &quot;alert&quot; : &quot;Hello world!&quot;
});</pre></blockquote><h4 class=CHeading>Supported plugins</h4><p>There are many great form related jQuery Plugins out there.&nbsp; The extension package provides out of the box support for some of these plugins.</p><h4 class=CHeading>Currently supported plugins</h4><ul><li>Built in <a href="#dForm_plugins" class=LSection id=link12 onMouseOver="ShowTip(event, 'tt12', 'link12')" onMouseOut="HideTip('tt12')">dForm plugins</a></li><li><a href="#jQuery_UI" class=LSection id=link13 onMouseOver="ShowTip(event, 'tt13', 'link13')" onMouseOut="HideTip('tt13')">jQuery UI</a></li><li>The <a href="#Validation_Plugin" class=LSection id=link14 onMouseOver="ShowTip(event, 'tt14', 'link14')" onMouseOut="HideTip('tt14')">Validation Plugin</a></li><li>The <a href="#jQuery_Form" class=LSection id=link15 onMouseOver="ShowTip(event, 'tt15', 'link15')" onMouseOut="HideTip('tt15')">jQuery Form</a> plugin through the <a href="#ajax" class=LSubscriber id=link16 onMouseOver="ShowTip(event, 'tt16', 'link16')" onMouseOut="HideTip('tt16')">ajax</a> subscriber</li></ul><p><b>NOTE</b> : The corresponding subscribers will only be added if the plugin or the part of the plugin (e.g. with jQuery UI custom builds that don&rsquo;t include all the widgets) is actually available, so make sure, these plugins are loaded <b>before</b> the dform plugin.</p><h4 class=CHeading>Author</h4><p>David Luecke (<a href="#" onClick="location.href='mai' + 'lto:' + 'da' + 'ff' + '@' + 'neye' + 'on.de'; return false;" class=LEMail>da<span style="display: none">.nosp@m.</span>ff<span>@</span>neye<span style="display: none">.nosp@m.</span>on.de</a>)</p><!--START_ND_SUMMARY--><div class=Summary><div class=STitle>Summary</div><div class=SBorder><table border=0 cellspacing=0 cellpadding=0 class=STable><tr class="SMain"><td class=SEntry><a href="#Extension" >Extension</a></td><td class=SDescription>This page covers how to extend the dform plugin of your own types and subscribers as well as providing a documentation for form related jQuery plugins that are already supported out of the box.</td></tr><tr class="SSection"><td class=SEntry><a href="#dForm_plugins" >dForm plugins</a></td><td class=SDescription>The Plugin comes with a couple of small built in extension plugins.</td></tr><tr class="SGroup SIndent1"><td class=SEntry><a href="#Subscribers" >Subscribers</a></td><td class=SDescription></td></tr><tr class="SSubscriber SIndent2 SMarked"><td class=SEntry><a href="#placeholder" >placeholder</a></td><td class=SDescription>Adds a default default value to text elements.</td></tr><tr class="SSection"><td class=SEntry><a href="#jQuery_UI" >jQuery UI</a></td><td class=SDescription>Subscribers using the <a href="http://jqueryui.com" class=LURL target=_top>jQuery UI Framework</a>. </td></tr><tr class="SGroup SIndent1"><td class=SEntry><a href="#Functions" >Functions</a></td><td class=SDescription></td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#_getOptions" id=link1 onMouseOver="ShowTip(event, 'tt1', 'link1')" onMouseOut="HideTip('tt1')">_getOptions</a></td><td class=SDescription>Returns a object containing the options for a jQuery UI widget. </td></tr><tr class="SGroup SIndent1"><td class=SEntry><a href="#Types" >Types</a></td><td class=SDescription></td></tr><tr class="SType SIndent2 SMarked"><td class=SEntry><a href="#progressbar" >progressbar</a></td><td class=SDescription>Returns a jQuery UI progressbar.</td></tr><tr class="SType SIndent2"><td class=SEntry><a href="#slider" >slider</a></td><td class=SDescription>Returns a slider element.</td></tr><tr class="SType SIndent2 SMarked"><td class=SEntry><a href="#accordion" >accordion</a></td><td class=SDescription>Creates an element container for a jQuery UI accordion.</td></tr><tr class="SType SIndent2"><td class=SEntry><a href="#tabs" >tabs</a></td><td class=SDescription>Returns a container for jQuery UI tabs element.</td></tr><tr class="SGroup SIndent1"><td class=SEntry><a href="#Subscribers" >Subscribers</a></td><td class=SDescription></td></tr><tr class="SSubscriber SIndent2 SMarked"><td class=SEntry><a href="#entries" >entries</a></td><td class=SDescription>Creates entries for <a href="#tabs" class=LType id=link2 onMouseOver="ShowTip(event, 'tt2', 'link2')" onMouseOut="HideTip('tt2')">tabs</a> or <a href="#accordion" class=LType id=link3 onMouseOver="ShowTip(event, 'tt3', 'link3')" onMouseOut="HideTip('tt3')">accordion</a> elements. </td></tr><tr class="SSubscriber SIndent2"><td class=SEntry><a href="#dialog" >dialog</a></td><td class=SDescription>Creates a dialog on container elements.</td></tr><tr class="SSubscriber SIndent2 SMarked"><td class=SEntry><a href="#resizable" >resizable</a></td><td class=SDescription>Makes the current element resizeable.</td></tr><tr class="SSubscriber SIndent2"><td class=SEntry><a href="#datepicker" >datepicker</a></td><td class=SDescription>Turns a text element into a datepicker.</td></tr><tr class="SSubscriber SIndent2 SMarked"><td class=SEntry><a href="#autocomplete" >autocomplete</a></td><td class=SDescription>Adds the autocomplete feature to a text element.</td></tr><tr class="SSubscriber SIndent2"><td class=SEntry><a href="#[post]" >[post]</a></td><td class=SDescription>Post processing subscriber that adds jQuery UI styling classes to <a href="dform-subscribers-js.html#text" class=LType id=link4 onMouseOver="ShowTip(event, 'tt4', 'link4')" onMouseOut="HideTip('tt4')">text</a>, <a href="dform-subscribers-js.html#textarea" class=LType id=link5 onMouseOver="ShowTip(event, 'tt5', 'link5')" onMouseOut="HideTip('tt5')">textarea</a>, <a href="dform-subscribers-js.html#password" class=LType id=link6 onMouseOver="ShowTip(event, 'tt6', 'link6')" onMouseOut="HideTip('tt6')">password</a> and <a href="dform-subscribers-js.html#fieldset" class=LType id=link7 onMouseOver="ShowTip(event, 'tt7', 'link7')" onMouseOut="HideTip('tt7')">fieldset</a> elements as well as calling .button() on <a href="dform-subscribers-js.html#submit" class=LType id=link8 onMouseOver="ShowTip(event, 'tt8', 'link8')" onMouseOut="HideTip('tt8')">submit</a> or <a href="dform-subscribers-js.html#button" class=LType id=link9 onMouseOver="ShowTip(event, 'tt9', 'link9')" onMouseOut="HideTip('tt9')">button</a> elements.</td></tr><tr class="SSection"><td class=SEntry><a href="#Validation_Plugin" >Validation Plugin</a></td><td class=SDescription>Support for the <a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" class=LURL target=_top>jQuery validation plugin</a></td></tr><tr class="SGroup SIndent1"><td class=SEntry><a href="#Subscribers" >Subscribers</a></td><td class=SDescription></td></tr><tr class="SSubscriber SIndent2 SMarked"><td class=SEntry><a href="#[pre]" >[pre]</a></td><td class=SDescription>Add a preprocessing subscriber that calls .validate() on the form, so that we can add rules to the input elements. </td></tr><tr class="SSubscriber SIndent2"><td class=SEntry><a href="#validate" >validate</a></td><td class=SDescription>Adds support for the jQuery validation rulesets.</td></tr><tr class="SSection"><td class=SEntry><a href="#jQuery_Form" >jQuery Form</a></td><td class=SDescription>Support for loading and submitting forms dynamically via AJAX using the <a href="http://jquery.malsup.com/form/" class=LURL target=_top>jQuery form</a> plugin.</td></tr><tr class="SGroup SIndent1"><td class=SEntry><a href="#Subscribers" >Subscribers</a></td><td class=SDescription></td></tr><tr class="SSubscriber SIndent2 SMarked"><td class=SEntry><a href="#ajax" >ajax</a></td><td class=SDescription>If the current element is a form, it will be turned into a dynamic form that can be submitted asynchronously.</td></tr><tr class="SSection"><td class=SEntry><a href="#i18n" >i18n</a></td><td class=SDescription>Localization is supported by using the <a href="https://github.com/jquery/jquery-global" class=LURL target=_top>jQuery Global</a> plugin.</td></tr><tr class="SGroup SIndent1"><td class=SEntry><a href="#Subscribers" >Subscribers</a></td><td class=SDescription></td></tr><tr class="SSubscriber SIndent2 SMarked"><td class=SEntry><a href="#i18n-html" >i18n-html</a></td><td class=SDescription>Extends the <a href="dform-subscribers-js.html#html" class=LSubscriber id=link10 onMouseOver="ShowTip(event, 'tt10', 'link10')" onMouseOut="HideTip('tt10')">html</a> subscriber that will replace any string with it&rsquo;s translated equivalent using the jQuery Global plugin. </td></tr><tr class="SSubscriber SIndent2"><td class=SEntry><a href="#i18n-options" >i18n-options</a></td><td class=SDescription>Extends the <a href="dform-subscribers-js.html#options" class=LSubscriber id=link11 onMouseOver="ShowTip(event, 'tt11', 'link11')" onMouseOut="HideTip('tt11')">options</a> subscriber for using internationalized option lists.</td></tr></table></div></div><!--END_ND_SUMMARY--></div></div></div>

<div class="CSection"><div class=CTopic><h2 class=CTitle><a name="dForm_plugins"></a>dForm plugins</h2><div class=CBody><p>The Plugin comes with a couple of small built in extension plugins.</p><!--START_ND_SUMMARY--><div class=Summary><div class=STitle>Summary</div><div class=SBorder><table border=0 cellspacing=0 cellpadding=0 class=STable><tr class="SGroup"><td class=SEntry><a href="#Subscribers" >Subscribers</a></td><td class=SDescription></td></tr><tr class="SSubscriber SIndent1 SMarked"><td class=SEntry><a href="#placeholder" >placeholder</a></td><td class=SDescription>Adds a default default value to text elements.</td></tr></table></div></div><!--END_ND_SUMMARY--></div></div></div>

<div class="CGroup"><div class=CTopic><h3 class=CTitle><a name="Subscribers"></a>Subscribers</h3></div></div>

<div class="CSubscriber"><div class=CTopic><h3 class=CTitle><a name="placeholder"></a>placeholder</h3><div class=CBody><p>Adds a default default value to text elements.</p><p>The default value will dissappear when the element gets focussed and reappears if the element looses focus and nothing has been entered.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>options</td><td class=CDLDescription>The default value to set.&nbsp; Usually a helper text with instructions for the user (e.g. enter mail here...)</td></tr><tr><td class=CDLEntry>type</td><td class=CDLDescription>The type of the <b>this</b> element</td></tr></table><h4 class=CHeading>For types</h4><p><a href="dform-subscribers-js.html#text" class=LType id=link17 onMouseOver="ShowTip(event, 'tt4', 'link17')" onMouseOut="HideTip('tt4')">text</a>, <a href="dform-subscribers-js.html#textarea" class=LType id=link18 onMouseOver="ShowTip(event, 'tt5', 'link18')" onMouseOut="HideTip('tt5')">textarea</a></p><h4 class=CHeading>Example</h4><blockquote><pre>{
      &quot;name&quot; : &quot;email&quot;,
      &quot;type&quot; : &quot;text&quot;,
      &quot;placeholder&quot; : &quot;e.g. mail@example.org&quot;
}</pre></blockquote></div></div></div>

<div class="CSection"><div class=CTopic><h2 class=CTitle><a name="jQuery_UI"></a>jQuery UI</h2><div class=CBody><p>Subscribers using the <a href="http://jqueryui.com" class=LURL target=_top>jQuery UI Framework</a>.&nbsp; Types and subscribers will only be added, if the corresponding jQuery UI plugin functions are available.</p><!--START_ND_SUMMARY--><div class=Summary><div class=STitle>Summary</div><div class=SBorder><table border=0 cellspacing=0 cellpadding=0 class=STable><tr class="SGroup"><td class=SEntry><a href="#Functions" >Functions</a></td><td class=SDescription></td></tr><tr class="SFunction SIndent1 SMarked"><td class=SEntry><a href="#_getOptions" id=link19 onMouseOver="ShowTip(event, 'tt1', 'link19')" onMouseOut="HideTip('tt1')">_getOptions</a></td><td class=SDescription>Returns a object containing the options for a jQuery UI widget. </td></tr><tr class="SGroup"><td class=SEntry><a href="#Types" >Types</a></td><td class=SDescription></td></tr><tr class="SType SIndent1 SMarked"><td class=SEntry><a href="#progressbar" >progressbar</a></td><td class=SDescription>Returns a jQuery UI progressbar.</td></tr><tr class="SType SIndent1"><td class=SEntry><a href="#slider" >slider</a></td><td class=SDescription>Returns a slider element.</td></tr><tr class="SType SIndent1 SMarked"><td class=SEntry><a href="#accordion" >accordion</a></td><td class=SDescription>Creates an element container for a jQuery UI accordion.</td></tr><tr class="SType SIndent1"><td class=SEntry><a href="#tabs" >tabs</a></td><td class=SDescription>Returns a container for jQuery UI tabs element.</td></tr><tr class="SGroup"><td class=SEntry><a href="#Subscribers" >Subscribers</a></td><td class=SDescription></td></tr><tr class="SSubscriber SIndent1 SMarked"><td class=SEntry><a href="#entries" >entries</a></td><td class=SDescription>Creates entries for <a href="#tabs" class=LType id=link20 onMouseOver="ShowTip(event, 'tt2', 'link20')" onMouseOut="HideTip('tt2')">tabs</a> or <a href="#accordion" class=LType id=link21 onMouseOver="ShowTip(event, 'tt3', 'link21')" onMouseOut="HideTip('tt3')">accordion</a> elements. </td></tr><tr class="SSubscriber SIndent1"><td class=SEntry><a href="#dialog" >dialog</a></td><td class=SDescription>Creates a dialog on container elements.</td></tr><tr class="SSubscriber SIndent1 SMarked"><td class=SEntry><a href="#resizable" >resizable</a></td><td class=SDescription>Makes the current element resizeable.</td></tr><tr class="SSubscriber SIndent1"><td class=SEntry><a href="#datepicker" >datepicker</a></td><td class=SDescription>Turns a text element into a datepicker.</td></tr><tr class="SSubscriber SIndent1 SMarked"><td class=SEntry><a href="#autocomplete" >autocomplete</a></td><td class=SDescription>Adds the autocomplete feature to a text element.</td></tr><tr class="SSubscriber SIndent1"><td class=SEntry><a href="#[post]" >[post]</a></td><td class=SDescription>Post processing subscriber that adds jQuery UI styling classes to <a href="dform-subscribers-js.html#text" class=LType id=link22 onMouseOver="ShowTip(event, 'tt4', 'link22')" onMouseOut="HideTip('tt4')">text</a>, <a href="dform-subscribers-js.html#textarea" class=LType id=link23 onMouseOver="ShowTip(event, 'tt5', 'link23')" onMouseOut="HideTip('tt5')">textarea</a>, <a href="dform-subscribers-js.html#password" class=LType id=link24 onMouseOver="ShowTip(event, 'tt6', 'link24')" onMouseOut="HideTip('tt6')">password</a> and <a href="dform-subscribers-js.html#fieldset" class=LType id=link25 onMouseOver="ShowTip(event, 'tt7', 'link25')" onMouseOut="HideTip('tt7')">fieldset</a> elements as well as calling .button() on <a href="dform-subscribers-js.html#submit" class=LType id=link26 onMouseOver="ShowTip(event, 'tt8', 'link26')" onMouseOut="HideTip('tt8')">submit</a> or <a href="dform-subscribers-js.html#button" class=LType id=link27 onMouseOver="ShowTip(event, 'tt9', 'link27')" onMouseOut="HideTip('tt9')">button</a> elements.</td></tr></table></div></div><!--END_ND_SUMMARY--></div></div></div>

<div class="CGroup"><div class=CTopic><h3 class=CTitle><a name="Functions"></a>Functions</h3></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="_getOptions"></a>_getOptions</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>function _getOptions(</td><td class=PParameter nowrap>type,</td></tr><tr><td></td><td class=PParameter nowrap>options</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns a object containing the options for a jQuery UI widget.&nbsp; The options will be taken from jQuery.ui.[typename].prototype.options</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>type</td><td class=CDLDescription>The jQuery UI type</td></tr><tr><td class=CDLEntry>options</td><td class=CDLDescription>The options to evaluate</td></tr></table></div></div></div>

<div class="CGroup"><div class=CTopic><h3 class=CTitle><a name="Types"></a>Types</h3></div></div>

<div class="CType"><div class=CTopic><h3 class=CTitle><a name="progressbar"></a>progressbar</h3><div class=CBody><p>Returns a jQuery UI progressbar.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>options</td><td class=CDLDescription>As specified in the <a href="http://jqueryui.com/demos/progressbar/" class=LURL target=_top>jQuery UI progressbar documentation</a></td></tr></table><h4 class=CHeading>Example</h4><blockquote><pre>{
     &quot;type&quot; : &quot;progressbar&quot;,
     &quot;value&quot; : 30,
     &quot;caption&quot; : &quot;Progressbar&quot;
}</pre></blockquote></div></div></div>

<div class="CType"><div class=CTopic><h3 class=CTitle><a name="slider"></a>slider</h3><div class=CBody><p>Returns a slider element.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>options</td><td class=CDLDescription>As specified in the <a href="http://jqueryui.com/demos/slider/" class=LURL target=_top>jQuery UI slider documentation</a></td></tr></table><h4 class=CHeading>Example</h4><blockquote><pre>{
     &quot;type&quot; : &quot;slider&quot;,
     &quot;values&quot; : [ 30, 80 ],
     &quot;range&quot; : true,
     &quot;caption&quot; : &quot;Slider&quot;
}</pre></blockquote></div></div></div>

<div class="CType"><div class=CTopic><h3 class=CTitle><a name="accordion"></a>accordion</h3><div class=CBody><p>Creates an element container for a jQuery UI accordion.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>options</td><td class=CDLDescription>As specified in the <a href="http://jqueryui.com/demos/accordion/" class=LURL target=_top>jQuery UI accordion documentation</a></td></tr></table><h4 class=CHeading>Example</h4><blockquote><pre>{
     &quot;type&quot; : &quot;accordion&quot;,
     &quot;caption&quot; : &quot;Accordion&quot;,
     &quot;entries&quot; :
     [
         {
             &quot;caption&quot; : &quot;Entry 1&quot;,
             &quot;elements&quot; :
             [
                 {
                     &quot;type&quot; : &quot;span&quot;,
                     &quot;html&quot; : &quot;Some HTML in accordion entry 1&quot;
                 }
             ]
         },
         {
             &quot;caption&quot; : &quot;Entry 2&quot;,
             &quot;elements&quot; :
             [
                 {
                     &quot;type&quot; : &quot;span&quot;,
                     &quot;html&quot; : &quot;Some HTML in accordion entry 2&quot;
                 }
             ]
         }
     ]
}</pre></blockquote></div></div></div>

<div class="CType"><div class=CTopic><h3 class=CTitle><a name="tabs"></a>tabs</h3><div class=CBody><p>Returns a container for jQuery UI tabs element.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>options</td><td class=CDLDescription>As specified in the <a href="http://jqueryui.com/demos/tabs/" class=LURL target=_top>jQuery UI tabs documentation</a></td></tr></table><h4 class=CHeading>Example</h4><blockquote><pre>{
     &quot;type&quot; : &quot;tabs&quot;,
     &quot;entries&quot; :
     {
         &quot;tab1&quot;:
         {
             &quot;caption&quot; : &quot;Step 1&quot;,
             &quot;elements&quot; :
             [
                 {
                     &quot;name&quot; : &quot;textfield&quot;,
                     &quot;caption&quot; : &quot;Just a textfield&quot;,
                     &quot;type&quot; : &quot;text&quot;
                 },
                 {
                     &quot;type&quot; : &quot;span&quot;,
                     &quot;html&quot; : &quot;Some HTML in tab 1&quot;
                 }
             ]
         },
         &quot;tab2&quot; :
         {
             &quot;caption&quot; : &quot;Step 2&quot;,
             &quot;elements&quot; :
             [
                 {
                     &quot;type&quot; : &quot;span&quot;,
                     &quot;html&quot; : &quot;Some HTML in tab 2&quot;
                 }
             ]
         }
     }
}</pre></blockquote></div></div></div>

<div class="CGroup"><div class=CTopic><h3 class=CTitle><a name="Subscribers"></a>Subscribers</h3></div></div>

<div class="CSubscriber"><div class=CTopic><h3 class=CTitle><a name="entries"></a>entries</h3><div class=CBody><p>Creates entries for <a href="#tabs" class=LType id=link28 onMouseOver="ShowTip(event, 'tt2', 'link28')" onMouseOut="HideTip('tt2')">tabs</a> or <a href="#accordion" class=LType id=link29 onMouseOver="ShowTip(event, 'tt3', 'link29')" onMouseOut="HideTip('tt3')">accordion</a> elements.&nbsp; Use the <a href="dform-subscribers-js.html#elements" class=LSubscriber id=link30 onMouseOver="ShowTip(event, 'tt17', 'link30')" onMouseOut="HideTip('tt17')">elements</a> subscriber to create subelements in each entry.</p><h4 class=CHeading>For types</h4><p><a href="#tabs" class=LType id=link31 onMouseOver="ShowTip(event, 'tt2', 'link31')" onMouseOut="HideTip('tt2')">tabs</a>, <a href="#accordion" class=LType id=link32 onMouseOver="ShowTip(event, 'tt3', 'link32')" onMouseOut="HideTip('tt3')">accordion</a></p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>options</td><td class=CDLDescription>All options for the container div.&nbsp; The <a href="dform-subscribers-js.html#caption" class=LSubscriber id=link33 onMouseOver="ShowTip(event, 'tt18', 'link33')" onMouseOut="HideTip('tt18')">caption</a> will be turned into the accordion or tab title.</td></tr><tr><td class=CDLEntry>type</td><td class=CDLDescription>The type of the <b>this</b> element</td></tr></table></div></div></div>

<div class="CSubscriber"><div class=CTopic><h3 class=CTitle><a name="dialog"></a>dialog</h3><div class=CBody><p>Creates a dialog on container elements.</p><h4 class=CHeading>For types</h4><p><a href="dform-subscribers-js.html#form" class=LType id=link34 onMouseOver="ShowTip(event, 'tt19', 'link34')" onMouseOut="HideTip('tt19')">form</a>, <a href="dform-subscribers-js.html#fieldset" class=LType id=link35 onMouseOver="ShowTip(event, 'tt7', 'link35')" onMouseOut="HideTip('tt7')">fieldset</a></p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>options</td><td class=CDLDescription>As specified in the <a href="http://jqueryui.com/demos/dialog/" class=LURL target=_top>jQuery UI dialog documentation</a></td></tr><tr><td class=CDLEntry>type</td><td class=CDLDescription>The type of the <b>this</b> element</td></tr></table></div></div></div>

<div class="CSubscriber"><div class=CTopic><h3 class=CTitle><a name="resizable"></a>resizable</h3><div class=CBody><p>Makes the current element resizeable.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>options</td><td class=CDLDescription>As specified in the <a href="http://jqueryui.com/demos/resizable/" class=LURL target=_top>jQuery UI resizable documentation</a></td></tr><tr><td class=CDLEntry>type</td><td class=CDLDescription>The type of the <b>this</b> element</td></tr></table><h4 class=CHeading>Example</h4><p>Makes a <a href="#tabs" class=LType id=link36 onMouseOver="ShowTip(event, 'tt2', 'link36')" onMouseOut="HideTip('tt2')">tabs</a> element resizable</p><blockquote><pre>{
     &quot;type&quot; : &quot;tabs&quot;,
     &quot;resizable&quot; :
     {
         &quot;minHeight&quot; : 200,
         &quot;minWidth&quot; : 300
     },
     &quot;entries&quot; :
     {
         &quot;resizable-tab1&quot;:
         {
             &quot;caption&quot; : &quot;Step 1&quot;,
             &quot;elements&quot; :
             [
                 {
                     &quot;type&quot; : &quot;span&quot;,
                     &quot;html&quot; : &quot;Some HTML in tab 1&quot;
                 }
             ]
         },
         &quot;resizable-tab2&quot; :
         {
             &quot;caption&quot; : &quot;Step 2&quot;,
             &quot;elements&quot; :
             [
                 {
                     &quot;type&quot; : &quot;span&quot;,
                     &quot;html&quot; : &quot;Some HTML in tab 2&quot;
                 }
             ]
         }
     }
}</pre></blockquote></div></div></div>

<div class="CSubscriber"><div class=CTopic><h3 class=CTitle><a name="datepicker"></a>datepicker</h3><div class=CBody><p>Turns a text element into a datepicker.</p><h4 class=CHeading>For types</h4><p><a href="dform-subscribers-js.html#text" class=LType id=link37 onMouseOver="ShowTip(event, 'tt4', 'link37')" onMouseOut="HideTip('tt4')">text</a></p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>options</td><td class=CDLDescription>As specified in the <a href="http://jqueryui.com/demos/datepicker/" class=LURL target=_top>jQuery UI datepicker documentation</a></td></tr><tr><td class=CDLEntry>type</td><td class=CDLDescription>The type of the <b>this</b> element</td></tr></table><h4 class=CHeading>Example</h4><p>Initializes the datepicker, using a button to show it</p><blockquote><pre>{
     &quot;name&quot; : &quot;date&quot;,
     &quot;type&quot; : &quot;text&quot;,
     &quot;datepicker&quot; : {  &quot;showOn&quot; : &quot;button&quot; }
}</pre></blockquote></div></div></div>

<div class="CSubscriber"><div class=CTopic><h3 class=CTitle><a name="autocomplete"></a>autocomplete</h3><div class=CBody><p>Adds the autocomplete feature to a text element.</p><h4 class=CHeading>For types</h4><p><a href="dform-subscribers-js.html#text" class=LType id=link38 onMouseOver="ShowTip(event, 'tt4', 'link38')" onMouseOut="HideTip('tt4')">text</a></p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>options</td><td class=CDLDescription>As specified in the <a href="http://jqueryui.com/demos/autotomplete/" class=LURL target=_top>jQuery UI autotomplete documentation</a></td></tr><tr><td class=CDLEntry>type</td><td class=CDLDescription>The type of the <b>this</b> element</td></tr></table><h4 class=CHeading>Example</h4><p>Initializes the datepicker, using a button to show it</p><blockquote><pre>{
     &quot;name&quot; : &quot;textfield&quot;,
     &quot;caption&quot; : &quot;Autocomplete&quot;,
     &quot;type&quot; : &quot;text&quot;,
     &quot;placeholder&quot; : &quot;Type 'A', 'B' or 'W'&quot;,
     &quot;autocomplete&quot; :
     {
         &quot;source&quot; : [ &quot;Apple&quot;, &quot;Android&quot;, &quot;Windows Phone&quot;, &quot;Blackberry&quot; ]
     }
}</pre></blockquote></div></div></div>

<div class="CSubscriber"><div class=CTopic><h3 class=CTitle><a name="[post]"></a>[post]</h3><div class=CBody><p>Post processing subscriber that adds jQuery UI styling classes to <a href="dform-subscribers-js.html#text" class=LType id=link39 onMouseOver="ShowTip(event, 'tt4', 'link39')" onMouseOut="HideTip('tt4')">text</a>, <a href="dform-subscribers-js.html#textarea" class=LType id=link40 onMouseOver="ShowTip(event, 'tt5', 'link40')" onMouseOut="HideTip('tt5')">textarea</a>, <a href="dform-subscribers-js.html#password" class=LType id=link41 onMouseOver="ShowTip(event, 'tt6', 'link41')" onMouseOut="HideTip('tt6')">password</a> and <a href="dform-subscribers-js.html#fieldset" class=LType id=link42 onMouseOver="ShowTip(event, 'tt7', 'link42')" onMouseOut="HideTip('tt7')">fieldset</a> elements as well as calling .button() on <a href="dform-subscribers-js.html#submit" class=LType id=link43 onMouseOver="ShowTip(event, 'tt8', 'link43')" onMouseOut="HideTip('tt8')">submit</a> or <a href="dform-subscribers-js.html#button" class=LType id=link44 onMouseOver="ShowTip(event, 'tt9', 'link44')" onMouseOut="HideTip('tt9')">button</a> elements.</p><p>Additionally, <a href="#accordion" class=LType id=link45 onMouseOver="ShowTip(event, 'tt3', 'link45')" onMouseOut="HideTip('tt3')">accordion</a> and <a href="#tabs" class=LType id=link46 onMouseOver="ShowTip(event, 'tt2', 'link46')" onMouseOut="HideTip('tt2')">tabs</a> elements will be initialized with their options given.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>options</td><td class=CDLDescription>All options that have been used for creating the current element.</td></tr><tr><td class=CDLEntry>type</td><td class=CDLDescription>The type of the <b>this</b> element</td></tr></table></div></div></div>

<div class="CSection"><div class=CTopic><h2 class=CTitle><a name="Validation_Plugin"></a>Validation Plugin</h2><div class=CBody><p>Support for the <a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" class=LURL target=_top>jQuery validation plugin</a></p><!--START_ND_SUMMARY--><div class=Summary><div class=STitle>Summary</div><div class=SBorder><table border=0 cellspacing=0 cellpadding=0 class=STable><tr class="SGroup"><td class=SEntry><a href="#Subscribers" >Subscribers</a></td><td class=SDescription></td></tr><tr class="SSubscriber SIndent1 SMarked"><td class=SEntry><a href="#[pre]" >[pre]</a></td><td class=SDescription>Add a preprocessing subscriber that calls .validate() on the form, so that we can add rules to the input elements. </td></tr><tr class="SSubscriber SIndent1"><td class=SEntry><a href="#validate" >validate</a></td><td class=SDescription>Adds support for the jQuery validation rulesets.</td></tr></table></div></div><!--END_ND_SUMMARY--></div></div></div>

<div class="CGroup"><div class=CTopic><h3 class=CTitle><a name="Subscribers"></a>Subscribers</h3></div></div>

<div class="CSubscriber"><div class=CTopic><h3 class=CTitle><a name="[pre]"></a>[pre]</h3><div class=CBody><p>Add a preprocessing subscriber that calls .validate() on the form, so that we can add rules to the input elements.&nbsp; Additionally the jQuery UI highlight classes will be added to the validation plugin default settings if the form has the ui-widget class.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>options</td><td class=CDLDescription>All options that have been used for creating the current element.</td></tr><tr><td class=CDLEntry>type</td><td class=CDLDescription>The type of the <b>this</b> element</td></tr></table></div></div></div>

<div class="CSubscriber"><div class=CTopic><h3 class=CTitle><a name="validate"></a>validate</h3><div class=CBody><p>Adds support for the jQuery validation rulesets.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>options</td><td class=CDLDescription>Options as specified in the rules parameter</td></tr><tr><td class=CDLEntry>type</td><td class=CDLDescription>The type of the <b>this</b> element</td></tr></table></div></div></div>

<div class="CSection"><div class=CTopic><h2 class=CTitle><a name="jQuery_Form"></a>jQuery Form</h2><div class=CBody><p>Support for loading and submitting forms dynamically via AJAX using the <a href="http://jquery.malsup.com/form/" class=LURL target=_top>jQuery form</a> plugin.</p><!--START_ND_SUMMARY--><div class=Summary><div class=STitle>Summary</div><div class=SBorder><table border=0 cellspacing=0 cellpadding=0 class=STable><tr class="SGroup"><td class=SEntry><a href="#Subscribers" >Subscribers</a></td><td class=SDescription></td></tr><tr class="SSubscriber SIndent1 SMarked"><td class=SEntry><a href="#ajax" >ajax</a></td><td class=SDescription>If the current element is a form, it will be turned into a dynamic form that can be submitted asynchronously.</td></tr></table></div></div><!--END_ND_SUMMARY--></div></div></div>

<div class="CGroup"><div class=CTopic><h3 class=CTitle><a name="Subscribers"></a>Subscribers</h3></div></div>

<div class="CSubscriber"><div class=CTopic><h3 class=CTitle><a name="ajax"></a>ajax</h3><div class=CBody><p>If the current element is a form, it will be turned into a dynamic form that can be submitted asynchronously.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>options</td><td class=CDLDescription>Options as specified in the <a href="http://jquery.malsup.com/form/#options-object" class=LURL target=_top>jQuery Form plugin documentation</a></td></tr><tr><td class=CDLEntry>type</td><td class=CDLDescription>The type of the <b>this</b> element</td></tr></table></div></div></div>

<div class="CSection"><div class=CTopic><h2 class=CTitle><a name="i18n"></a>i18n</h2><div class=CBody><p>Localization is supported by using the <a href="https://github.com/jquery/jquery-global" class=LURL target=_top>jQuery Global</a> plugin.</p><!--START_ND_SUMMARY--><div class=Summary><div class=STitle>Summary</div><div class=SBorder><table border=0 cellspacing=0 cellpadding=0 class=STable><tr class="SGroup"><td class=SEntry><a href="#Subscribers" >Subscribers</a></td><td class=SDescription></td></tr><tr class="SSubscriber SIndent1 SMarked"><td class=SEntry><a href="#i18n-html" >i18n-html</a></td><td class=SDescription>Extends the <a href="dform-subscribers-js.html#html" class=LSubscriber id=link47 onMouseOver="ShowTip(event, 'tt10', 'link47')" onMouseOut="HideTip('tt10')">html</a> subscriber that will replace any string with it&rsquo;s translated equivalent using the jQuery Global plugin. </td></tr><tr class="SSubscriber SIndent1"><td class=SEntry><a href="#i18n-options" >i18n-options</a></td><td class=SDescription>Extends the <a href="dform-subscribers-js.html#options" class=LSubscriber id=link48 onMouseOver="ShowTip(event, 'tt11', 'link48')" onMouseOut="HideTip('tt11')">options</a> subscriber for using internationalized option lists.</td></tr></table></div></div><!--END_ND_SUMMARY--></div></div></div>

<div class="CGroup"><div class=CTopic><h3 class=CTitle><a name="Subscribers"></a>Subscribers</h3></div></div>

<div class="CSubscriber"><div class=CTopic><h3 class=CTitle><a name="i18n-html"></a>i18n-html</h3><div class=CBody><p>Extends the <a href="dform-subscribers-js.html#html" class=LSubscriber id=link49 onMouseOver="ShowTip(event, 'tt10', 'link49')" onMouseOut="HideTip('tt10')">html</a> subscriber that will replace any string with it&rsquo;s translated equivalent using the jQuery Global plugin.&nbsp; The html content will be interpreted as an index string where the first part indicates the localize main index and every following a sub index using <a href="dform-js.html#getValueAt" class=LFunction id=link50 onMouseOver="ShowTip(event, 'tt20', 'link50')" onMouseOut="HideTip('tt20')">getValueAt</a>.</p><h4 class=CHeading>Example</h4><p>// Register localized strings jQuery.global.localize(&ldquo;form&rdquo;, &ldquo;en&rdquo;, { &ldquo;name&rdquo; : &ldquo;A name&rdquo;, &ldquo;field&rdquo; : { &ldquo;username&rdquo; : &ldquo;User name&rdquo;, &ldquo;password&rdquo; : &ldquo;Password&rdquo; } });</p><p>{ &ldquo;type&rdquo; : &ldquo;div&rdquo;, &ldquo;html&rdquo; : &ldquo;form.name&rdquo;, &ldquo;elements&rdquo; : [ { &ldquo;type&rdquo; : &ldquo;h2&rdquo;, &ldquo;html&rdquo; : &ldquo;form.field.password&rdquo; } ] } (end code)</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>options</td><td class=CDLDescription>The html string to localize</td></tr><tr><td class=CDLEntry>type</td><td class=CDLDescription>The type of the <b>this</b> element</td></tr></table></div></div></div>

<div class="CSubscriber"><div class=CTopic><h3 class=CTitle><a name="i18n-options"></a>i18n-options</h3><div class=CBody><p>Extends the <a href="dform-subscribers-js.html#options" class=LSubscriber id=link51 onMouseOver="ShowTip(event, 'tt11', 'link51')" onMouseOut="HideTip('tt11')">options</a> subscriber for using internationalized option lists.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>options</td><td class=CDLDescription>Options as specified in the <a href="http://jquery.malsup.com/form/#options-object" class=LURL target=_top>jQuery Form plugin documentation</a></td></tr><tr><td class=CDLEntry>type</td><td class=CDLDescription>The type of the <b>this</b> element</td></tr></table></div></div></div>

</div><!--Content-->


<div id=Footer>Copyright &copy; 2011 - David Luecke - daff@neyeon.de&nbsp; &middot;&nbsp; <a href="http://www.naturaldocs.org">Generated by Natural Docs</a></div><!--Footer-->


<div id=Menu><div class=MTitle>jQuery::dForm 0.1.3</div><div class=MEntry><div class=MFile><a href="../files2/readme-txt.html">Home</a></div></div><div class=MEntry><div class=MFile><a href="../files2/examples-txt.html">Examples</a></div></div><div class=MEntry><div class=MFile><a href="dform-subscribers-js.html">Usage</a></div></div><div class=MEntry><div class=MFile id=MSelected>Extension</div></div><div class=MEntry><div class=MFile><a href="dform-js.html">Plugin</a></div></div><div class=MEntry><div class=MFile><a href="../files2/changelog-txt.html">Changelog</a></div></div><div class=MEntry><div class=MFile><a href="../files2/license-txt.html">License</a></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent1')">Index</a><div class=MGroupContent id=MGroupContent1><div class=MEntry><div class=MIndex><a href="../index/General.html">Everything</a></div></div><div class=MEntry><div class=MIndex><a href="../index/Types.html">Types</a></div></div><div class=MEntry><div class=MIndex><a href="../index/Subscribers.html">Subscribers</a></div></div><div class=MEntry><div class=MIndex><a href="../index/Functions.html">Functions</a></div></div><div class=MEntry><div class=MIndex><a href="../index/Files.html">Files</a></div></div><div class=MEntry><div class=MIndex><a href="../index/Examples.html">Examples</a></div></div><div class=MEntry><div class=MIndex><a href="../index/Variables.html">Variables</a></div></div></div></div></div><script type="text/javascript"><!--
var searchPanel = new SearchPanel("searchPanel", "HTML", "../search");
--></script><div id=MSearchPanel class=MSearchPanelInactive><input type=text id=MSearchField value=Search onFocus="searchPanel.OnSearchFieldFocus(true)" onBlur="searchPanel.OnSearchFieldFocus(false)" onKeyUp="searchPanel.OnSearchFieldChange()"><select id=MSearchType onFocus="searchPanel.OnSearchTypeFocus(true)" onBlur="searchPanel.OnSearchTypeFocus(false)" onChange="searchPanel.OnSearchTypeChange()"><option  id=MSearchEverything selected value="General">Everything</option><option value="Examples">Examples</option><option value="Files">Files</option><option value="Functions">Functions</option><option value="Subscribers">Subscribers</option><option value="Types">Types</option><option value="Variables">Variables</option></select></div></div><!--Menu-->



<!--START_ND_TOOLTIPS-->
<div class=CToolTip id="tt1"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>function _getOptions(</td><td class=PParameter nowrap>type,</td></tr><tr><td></td><td class=PParameter nowrap>options</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Returns a object containing the options for a jQuery UI widget. </div></div><div class=CToolTip id="tt2"><div class=CType>Returns a container for jQuery UI tabs element.</div></div><div class=CToolTip id="tt3"><div class=CType>Creates an element container for a jQuery UI accordion.</div></div><div class=CToolTip id="tt4"><div class=CType>Type function that creates a text input field</div></div><div class=CToolTip id="tt5"><div class=CType>Creates a textarea</div></div><div class=CToolTip id="tt6"><div class=CType>Type function that creates a password input field</div></div><div class=CToolTip id="tt7"><div class=CType>Creates an empty fieldset to contain other elements</div></div><div class=CToolTip id="tt8"><div class=CType>Creates a form submit button</div></div><div class=CToolTip id="tt9"><div class=CType>Creates a button element</div></div><div class=CToolTip id="tt10"><div class=CSubscriber>Sets html content of the current element</div></div><div class=CToolTip id="tt11"><div class=CSubscriber>Adds options to select type elements or radio and checkbox list elements.</div></div><div class=CToolTip id="tt12"><div class=CSection>The Plugin comes with a couple of small built in extension plugins.</div></div><div class=CToolTip id="tt13"><div class=CSection>Subscribers using the jQuery UI Framework. </div></div><div class=CToolTip id="tt14"><div class=CSection>Support for the jQuery validation plugin</div></div><div class=CToolTip id="tt15"><div class=CSection>Support for loading and submitting forms dynamically via AJAX using the jQuery form plugin.</div></div><div class=CToolTip id="tt16"><div class=CSubscriber>If the current element is a form, it will be turned into a dynamic form that can be submitted asynchronously.</div></div><div class=CToolTip id="tt17"><div class=CSubscriber>Recursively appends subelements to the current form element.</div></div><div class=CToolTip id="tt18"><div class=CSubscriber>Adds caption to elements.</div></div><div class=CToolTip id="tt19"><div class=CType>Type function that creates a form. </div></div><div class=CToolTip id="tt20"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>getValueAt : function(</td><td class=PParameter nowrap>object,</td></tr><tr><td></td><td class=PParameter nowrap>path</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Returns the value in an object based on the given dot separated path or false if not found. </div></div><!--END_ND_TOOLTIPS-->




<div id=MSearchResultsWindow><iframe src="" frameborder=0 name=MSearchResults id=MSearchResults></iframe><a href="javascript:searchPanel.CloseResultsWindow()" id=MSearchResultsWindowClose>Close</a></div>


<script language=JavaScript><!--
if (browserType) {if (browserVer) {document.write("</div>"); }document.write("</div>");}// --></script></body></html>